<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>嫁给我</title>
  <link type="text/css" rel="stylesheet" href="css/MyCss.css" />
  <style>
	*{margin: 0; padding: 0;}
	.paint {position: relative; margin: 50px auto; width: 888px;}
	.alert {position: absolute; width: 280px; height: 76px; left: 304px; top: 220px; opacity: 0.8; background: #fff; box-shadow: 1px 2px 6px #555; border-radius: 5px; padding: 20px; overflow: hidden;}
	.alert > div {
		width: 280px;
		height: ; 
	}
	.marryMe {text-align: center; font-size: 14px;}
	.btn { margin-top: 20px; margin-left: 50px;}
	
	
	#myCanvas {background: #ff99ff; }

	/*打开动画*/
	.win_open {
		-webkit-animation-name: open;
		animation-name: open;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards; /*一次性*/
	}
	.win_close {
		-webkit-animation-name: close;
		animation-name: close;
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards; /*一次性*/
	}
	@-webkit-keyframes close {
		to {width: 0; height: 0; left: 440px; top: 270px; }
		75% {opacity: 0.8;}
		100% {opacity: 0;}
	}
	@keyframes close {
		to {width: 0; height: 0; left: 440px; top: 270px; }
		75% {opacity: 0.8;}
		100% {opacity: 0;}
	}
	@-webkit-keyframes open {
		from {width: 0; height: 0; left: 440px; top: 270px; opacity: 0;}
		to {width: 280px; height: 76px; left: 304px; top: 220px; opacity: 0.8;}
		
	}
	@keyframes open {
		from {width: 0; height: 0; left: 440px; top: 270px; opacity: 0;}
		to {width: 280px; height: 76px; left: 304px; top: 220px; opacity: 0.8;}
	}
	/*颤动动画*/
	.shake_effect{
		-webkit-animation-name: shake;
		animation-name: shake;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
	}
	@-webkit-keyframes shake {
	 from, to {
	   -webkit-transform: translate3d(0, 0, 0);
	   transform: translate3d(0, 0, 0);
	 }
	 10%, 30%, 50%, 70%, 90% {
	   -webkit-transform: translate3d(-10px, 0, 0);
	   transform: translate3d(-10px, 0, 0);
	 }
	 20%, 40%, 60%, 80% {
	   -webkit-transform: translate3d(10px, 0, 0);
	   transform: translate3d(10px, 0, 0);
	 }
	}
	@keyframes shake {
	 from, to {
	   -webkit-transform: translate3d(0, 0, 0);
	   transform: translate3d(0, 0, 0);
	 }
	 10%, 30%, 50%, 70%, 90% {
	   -webkit-transform: translate3d(-10px, 0, 0);
	   transform: translate3d(-10px, 0, 0);
	 }
	 20%, 40%, 60%, 80% {
	   -webkit-transform: translate3d(10px, 0, 0);
	   transform: translate3d(10px, 0, 0);
	 }
	}
	
	.radius-box-style1 {color: #555;}
  </style>
 </head>
 <body>
	
	<div class="paint">
		<div style="padding: 4px;">
			<a class="radius-box-style1 messageWall">留言墙</a>
		</div>
		<div class="alert">
			<div>
				<p class="marryMe">你愿意嫁给我吗？</p>
				<input type="button" class="btn btn-success ripple yes" value="愿意"/>
				<input type="button" class="btn btn-success ripple no" value="不愿意"/>
			</div>
		</div>
		<canvas id="myCanvas" width="888" height="666"></canvas>
		
	</div>
	<script src="js/MyjsV0-8.js"></script>
	<script>
	//参考
	//http://www.w3school.com.cn/html5/html_5_canvas.asp
	//http://www.w3school.com.cn/tags/canvas_filltext.asp
	//http://www.w3school.com.cn/html5/html5_ref_canvas.asp
	var ctx = $("#myCanvas").getContext("2d");
	/*
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0,0,150,75);
	*/
	var arr = ["炫酷", "浪漫"];
	var fontS = [40, 20, 10];
	var widthS = [100, 50, 25];
	var marryThink = ["难受，再考虑一下下！", "要认真考虑哦！", "还有浪漫炫酷呢，再考虑一下！", "过了这个村没这店的呢！", "别酱嘛，再考虑一下下！", "是不够浪漫吗？", "这么浪漫的我，不考虑一下？"];
	var gradient;  //渐进性对象
	var color = [gradient, "#99ffcc", "#0099ff", "#ff0066", "#ff6666", "#99ff00", "#ff0066", "#666633", "#9900ff", "#cc0033", "#ff66ff", "#9900cc", "#cc3300"];

	var count = 0;
	var maxCount = 2000;

	//前奏 特效
	var timer = setInterval(function(){
		drawText();
		if((++count) >= 1000){
			clearInterval(timer);
			var timer_ = setInterval(function(){
				drawText();
				if((++count) >= 2000){
					clearInterval(timer_);
				}
			}, 50);
		}
	}, 5);
	
	//打开marryMe窗口
	$(".alert").eq(0).cssKV("opacity", "0");
	setTimeout(function(){
		$(".alert").eq(0).addClass("win_open");
		$(".alert").eq(0).cssKV("opacity", "1");
	}, 3000);

	function drawText(){
		var index = Num_ran(0, 3);
		text1(ctx, arr[Num_ran(0, 2)], fontS[index], widthS[index]);
	}
	//写文字
	function text1(ctx, text, fontSize, w){
		var x = Num_ran(fontSize, 850);
		var y = Num_ran(fontSize, 630); 
		ctx.font=fontSize+"px Georgia";
		// 创建渐变
		var gradient = ctx.createLinearGradient(x, y, w, 0);
		gradient.addColorStop("0", "magenta");
		gradient.addColorStop("0.5", "blue");
		gradient.addColorStop("1.0", "red");
		color[0] = gradient;
		// 用渐变填色
		ctx.fillStyle = color[Num_ran(0, 13)];
		ctx.rotate(Num_ran(-180, 180)/180);
		ctx.fillText(text, x, y);
	}

	ctx.closePath();
	//不愿意点击
	$(".no").eq(0).onclick = function(e){
		$(".alert").eq(0).removeClass("shake_effect");
		$(".alert").eq(0).removeClass("win_open");
		$(".marryMe").eq(0).text(marryThink[Num_ran(0, 7)]);
		setTimeout(function(){
			$(".alert").eq(0).addClass("shake_effect");
			setTimeout(function (){
				$(".marryMe").eq(0).text("你愿意嫁给我吗？");
			}, 1500);
		}, 10);
	}
	//愿意点击
	$(".yes").eq(0).onclick = function(e) {
		$(".alert").eq(0).removeClass("win_open");
		$(".alert").eq(0).removeClass("shake_effect");
		$(".alert").eq(0).addClass("win_close");
	}

	$("#myCanvas").onclick = function(e) {
		$(".alert").eq(0).removeClass("win_close");
		$(".alert").eq(0).addClass("win_open");
	}

	//点击跳转留言墙
	$(".messageWall").eq(0).onclick = function(e) {
		link.open("font/messageWall.html");
	}

	var arr = [{id:"1"}, {id:"2"}, {id:"3"}, {id:"4"}, {id:"5"}];
	var jsonArr = $$.json.toJSON(arr);
	console.log(jsonArr.subJSONArray(1, 3).toString());
	</script>
 </body>
</html>